<script>
import { mapState } from 'vuex'

export default {
  name: 'transportForm',
  data() {
    return {
      formData: {
        // 司机ID
        driverId: [],
        // 运输任务ID
        id: '',
        // 车次ID
        transportTripsId: '',
        // 车辆ID
        truckId: ''
      }
    }
  },
  methods: {
    /*
    * 获取车次列表的回调函数
    *  */
    async fetchTrips(transportLineId) {
      try {
        await this.$store.dispatch('transportStore/fetchTripsAction', transportLineId)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 获取车辆列表的回调函数
    *  */
    async fetchVehicleList() {
      try {
        await this.$store.dispatch('vehicleListStore/fetchVehicleListAction', { page: 1, pageSize: 20 })
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    ...mapState('transportStore', ['trips']),
    ...mapState('vehicleListStore', ['vehicleList'])
  }
}
</script>

<template>
  <el-form label-width="100px" :model="formData">
    <el-form-item label="任务编号:">
      <el-input placeholder="请输入任务编号" v-model="formData.id"></el-input>
    </el-form-item>
    <el-form-item label="运单数量:">
      <el-input placeholder="请输入运单数量"></el-input>
    </el-form-item>
    <el-form-item label="选择车次">
      <el-select v-model="formData.transportTripsId">
        <el-option v-for="(item) in trips" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="选择车辆:">
      <el-select v-model="formData.truckId">
        <el-option v-for="(item) in vehicleList" :value="item.id" :label="item.licensePlate" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 80%;

  .el-select {
    width: 100%;
  }
}
</style>
